{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# メソッド\n",
    "\n",
    "* jQueryのメソッド色々\n",
    "\n",
    "## ブラウザを使う場合の操作対象のHTML\n",
    "\n",
    "* ChromeDeveloperToolsで操作する対象のHTMLは断りが無い限り以下を使う\n",
    "\n",
    "```\n",
    "================================================\n",
    "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n",
    "<html>\n",
    "  <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"></script>\n",
    "    <title>テスト用ページ</title>\n",
    "    <style>\n",
    "      #section-1 {\n",
    "        background-color: #C8E6C9;\n",
    "      }\n",
    "      #section-2 {\n",
    "        background-color: #FFF9C4;\n",
    "      }\n",
    "      .child1 {\n",
    "        text-decoration: underline;\n",
    "      }\n",
    "      .child2 {\n",
    "        font-size: 24px;\n",
    "      }\n",
    "      .child3 {\n",
    "        color: red;\n",
    "      }\n",
    "    </style>\n",
    "  </head>\n",
    "  \n",
    "  <body>\n",
    "    <section id=\"section-1\">\n",
    "      <h2>セクション1</h2>\n",
    "      <p class=\"child1\">子ノード1</p>\n",
    "      <p class=\"child2\">子ノード2</p>\n",
    "      <p class=\"child3\">子ノード3</p>\n",
    "    </section>\n",
    "    <section id=\"section-2\">\n",
    "      <h2>セクション2</h2>\n",
    "      <p class=\"child1\">子ノード1</p>\n",
    "      <p class=\"child2\">子ノード2</p>\n",
    "      <p class=\"child3\">子ノード3</p>\n",
    "    </section>\n",
    "  </body>\n",
    "</html>\n",
    "================================================\n",
    "```\n",
    "\n",
    "<img src=\"img/basic_07.png\" alt=\"basic_07\" title=\"basic_07\" width=\"150\" height=\"200\" align=\"left\" />  \n",
    "\n",
    "<br clear=\"left\">"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "created 10.136.3.175:/var/share/jquery.html\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "source ${HOME}/secrets\n",
    "name=jquery.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "\n",
    "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n",
    "<html>\n",
    "  <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"></script>\n",
    "    <title>テスト用ページ</title>\n",
    "    <style>\n",
    "      #section-1 {\n",
    "        background-color: #C8E6C9;\n",
    "      }\n",
    "      #section-2 {\n",
    "        background-color: #FFF9C4;\n",
    "      }\n",
    "      .child1 {\n",
    "        text-decoration: underline;\n",
    "      }\n",
    "      .child2 {\n",
    "        font-size: 24px;\n",
    "      }\n",
    "      .child3 {\n",
    "        color: red;\n",
    "      }\n",
    "    </style>\n",
    "  </head>\n",
    "  \n",
    "  <body>\n",
    "    <section id=\"section-1\">\n",
    "      <h2>セクション1</h2>\n",
    "      <p class=\"child1\">子ノード1</p>\n",
    "      <p class=\"child2\">子ノード2</p>\n",
    "      <p class=\"child3\">子ノード3</p>\n",
    "    </section>\n",
    "    <section id=\"section-2\">\n",
    "      <h2>セクション2</h2>\n",
    "      <p class=\"child1\">子ノード1</p>\n",
    "      <p class=\"child2\">子ノード2</p>\n",
    "      <p class=\"child3\">子ノード3</p>\n",
    "    </section>\n",
    "  </body>\n",
    "</html>\n",
    "\n",
    "EOS\n",
    "\n",
    "### ソースの転送\n",
    "sshpass -p \"${pass}\" scp ${name} ${user}@${host}:${path}\n",
    "echo \"created ${host}:${path}/${name}\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Jupyter上で使う場合\n",
    "\n",
    "* 現在文字化けするのでいったん日本語は使わないようにする\n",
    "\n",
    "```\n",
    "================================================\n",
    "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n",
    "<html>\n",
    "  <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"></script>\n",
    "    <title>Test Page</title>\n",
    "    <style>\n",
    "      #section-1 {\n",
    "        background-color: #C8E6C9;\n",
    "      }\n",
    "      #section-2 {\n",
    "        background-color: #FFF9C4;\n",
    "      }\n",
    "      .child1 {\n",
    "        text-decoration: underline;\n",
    "      }\n",
    "      .child2 {\n",
    "        font-size: 24px;\n",
    "      }\n",
    "      .child3 {\n",
    "        color: red;\n",
    "      }\n",
    "    </style>\n",
    "  </head>\n",
    "  \n",
    "  <body>\n",
    "    <section id=\"section-1\">\n",
    "      <h2>Section1</h2>\n",
    "      <p class=\"child1\">Child node1</p>\n",
    "      <p class=\"child2\">Child node2</p>\n",
    "      <p class=\"child3\">Child node3</p>\n",
    "    </section>\n",
    "    <section id=\"section-2\">\n",
    "      <h2>Section2</h2>\n",
    "      <p class=\"child1\">Child node1</p>\n",
    "      <p class=\"child2\">Child node2</p>\n",
    "      <p class=\"child3\">Child node3</p>\n",
    "    </section>\n",
    "  </body>\n",
    "</html>\n",
    "================================================\n",
    "```\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "-"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## セレクタを使って子要素を取得\n",
    "\n",
    "```\n",
    "================================================\n",
    "### タグを取得(titleタグ)\n",
    "$(\"title\");\n",
    "\n",
    "### クラスを取得 (child1クラス)\n",
    "$('.child1')\n",
    "\n",
    "### IDとタグを取得(section-1というidのpタグ)\n",
    "$('#section-1 p')\n",
    "================================================\n",
    "```\n",
    "\n",
    "<!--\n",
    "<img src=\"img/ChromeDeveloperTools_01.png\" alt=\"ChromeDeveloperTools_01.png\" title=\"ChromeDeveloperTools_01.png\" align=\"left\" />\n",
    "-->"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Section1Section2\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "html=jquery.html\n",
    "js=method.js\n",
    "\n",
    "### jsファイルの作成\n",
    "### ヘッダ部分\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "const fs = require('fs');\n",
    "\n",
    "EOS\n",
    "\n",
    "### htmlファイル指定部分\n",
    "cat <<- EOS >> ${js}\n",
    "fs.readFile(__dirname + \"/${html}\", function (err, data) {\n",
    "  if (err) throw err;\n",
    "\n",
    "EOS\n",
    "\n",
    "### スクリプト部分\n",
    "cat <<- 'EOS' >> ${js}\n",
    "  var body = data.toString();\n",
    "  //console.log(body);\n",
    "  console.log($(body).find('h2').text());\n",
    "EOS\n",
    "\n",
    "### fs.readFile閉じ\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## each()メソッド\n",
    "\n",
    "* 複数の要素に対して処理を行う\n",
    "\n",
    "### 基本構文\n",
    "\n",
    "```\n",
    "================================================\n",
    "$( セレクタ ).each(function(インデックス, エレメント) { \n",
    "  ループ処理\n",
    "});\n",
    "================================================\n",
    "```\n",
    "\n",
    "\n",
    "### section-1のp要素の中のテキストを取得(引数無し)\n",
    "\n",
    "* `$(this)` を使って要素を取得\n",
    "\n",
    "```\n",
    "================================================\n",
    "$('#section-1 p').each(function() {\n",
    "    console.log($(this).text());\n",
    "});\n",
    "===\n",
    "子ノード1\n",
    "子ノード2\n",
    "子ノード3\n",
    "================================================\n",
    "```\n",
    "\n",
    "### 引数を指定して処理\n",
    "\n",
    "* 第一引数 i : index\n",
    "* 第二引数 `$(val)` : 値\n",
    "\n",
    "```\n",
    "================================================\n",
    "$('#section-1 p').each(function(i, val) {\n",
    "    console.log(i+':'+$(val).text());\n",
    "});\n",
    "===\n",
    "0:子ノード1\n",
    "1:子ノード2\n",
    "2:子ノード3\n",
    "================================================\n",
    "```\n",
    "\n",
    "### 第一引数のみ指定した処理\n",
    "\n",
    "* 値は `$(this)` で取得\n",
    "\n",
    "```\n",
    "================================================\n",
    "$('#section-1 p').each(function(i) {\n",
    "    console.log(i+':'+$(this).text());\n",
    "});\n",
    "===\n",
    "0:子ノード1\n",
    "1:子ノード2\n",
    "2:子ノード3\n",
    "================================================\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## JQuery.each()メソッド\n",
    "\n",
    "* `$.each()` メソッドともかける\n",
    "* 普通の配列やjQueryオブジェクトでないものも扱える\n",
    "    * 普通のeach()メソッドはjQueryオブジェクトに対してのみ使用できる\n",
    "\n",
    "### 基本構文\n",
    "\n",
    "```\n",
    "================================================\n",
    "$.each( 配列やオブジェクト , function(インデックス（オブジェクトはキー）, エレメント) { \n",
    "  ループ処理\n",
    "});\n",
    "================================================\n",
    "```\n",
    "\n",
    "### 要素をループ処理\n",
    "\n",
    "* 先ほどのeach()と同じ処理\n",
    "\n",
    "```\n",
    "================================================\n",
    "$.each($('#section-1 p'), function(i, val) {\n",
    "    console.log(i+':'+$(val).text());\n",
    "});\n",
    "===\n",
    "0:子ノード1\n",
    "1:子ノード2\n",
    "2:子ノード3\n",
    "================================================\n",
    "```\n",
    "\n",
    "### 配列を処理\n",
    "\n",
    "* each()と違い配列を処理できる\n",
    "\n",
    "```\n",
    "================================================\n",
    "var arr = [ \"apple\", \"orange\", \"grape\" ];\n",
    "$.each(arr, function(i, val) {\n",
    "    console.log(i+':'+val);\n",
    "});\n",
    "===\n",
    "0:apple\n",
    "1:orange\n",
    "2:grape\n",
    "================================================\n",
    "```"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
